<template>
	<!-- 胜平负 -->
	<view class="yc-data-checkbox">
		<view class="checkbox ">
			<view class="box"><!-- 胜平负 -->
				<view class="box" v-if="noshowgame('HAD')">
					<view class="check" v-for="item,index in styledata.spf.res" :key="index"
					:style="styledata.spf.style[index]==0?'':' background-color: red; color: #fff;'" @click="change('spf',index,'HAD')">
						<view class="huadan">
							<view :class="noshowdan('HAD')?'inner-box1':''">
								<text v-show="noshowdan('HAD')" style="transform: scale(0.8);">单</text>
							</view>
							<text style="font-weight: 700;font-size:28rpx;">{{item}}</text>
							<text style="margin-left: 5px;align-self:center;font-size:26rpx;">
								{{ fixSelectData['HAD'][styledata.spf.keyArr[index]]}}
							</text>
							<text v-if=" fixSelectData['HAD'][styledata.spf.keyArr[index]+'F']!=0" :style=" fixSelectData['HAD'][styledata.spf.keyArr[index]+'F']>0?'color:red;':'color:green;'">
								{{ fixSelectData['HAD'][styledata.spf.keyArr[index]+'F']>0?'↑':'↓'}}
							</text>
						</view>
					</view>
				</view>
				<view v-else class="check" style="flex: 1;">
					<view style="color: #999999;">
						未开售
					</view>
				</view>
			</view>
			<view class="box"><!-- 让球胜平负 -->
				<view class="box" v-if="noshowgame('HHAD')">
					<view class="check" v-for="item,index in styledata.rq.res" :key="index"
					:style="styledata.rq.style[index]==0?'':' background-color: red; color: #fff;'" @click="change('rq',index,'HHAD')">
						<view class="huadan">
						
							<view :class="noshowdan('HHAD')?'inner-box1':''">
								<text v-show="noshowdan('HHAD')"
									style="transform: scale(0.8);">单</text>
							</view>
							<text style="font-weight: 700;font-size:28rpx;">{{item}}</text>
							<text style="margin-left: 5px;font-size:28rpx;">
								<text style="margin-left: 5px;align-self:center;font-size:26rpx;">
									{{ fixSelectData['HHAD'][styledata.rq.keyArr[index]]}}
								</text>
								<text v-if=" fixSelectData['HHAD'][styledata.rq.keyArr[index]+'F']!=0" :style=" fixSelectData['HHAD'][styledata.rq.keyArr[index]+'F']>0?'color:red;':'color:green;'">
									{{ fixSelectData['HHAD'][styledata.rq.keyArr[index]+'F']>0?'↑':'↓'}}
								</text>
							</text>
						</view>
					</view>
				</view>
				<view v-else class="check" style="flex: 1;">
					<view style="color: #999999;">
						未开售
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { ref, onBeforeMount, watch } from 'vue';
// import date from '@/common/getdatetime.js';

export default {
  name: 'spfcheckbox', // 你的组件名称
  props: {
    Refresh: Boolean,
    fixSelectData: Object
  },
  emits: ['getSelectList'],
  data() {
    return {
      styledata: {},
      temporaryArr: '',
      deleteId: this.fixSelectData.MatchId
    };
  },
  methods: {
    init() {
      this.temporaryArr = '';
      // 字典
      const arr = {
        spf: {
          style: [0, 0, 0],
          res: ['胜', '平', '负'],
          keyArr: ['H', 'D', 'A']
        },
        rq: {
          style: [0, 0, 0],
          res: ['让胜', '让平', '让负'],
          keyArr: ['H', 'D', 'A']
        }
      };
      this.styledata = arr;
    },
    change(game, index, gameId) {
      const array = {
        awayTeamAbbName: this.fixSelectData.AwayTeamAbbName,
        homeTeamAbbName: this.fixSelectData.HomeTeamAbbName,
        matchId: this.fixSelectData.MatchId,
        leagueAbbName: this.fixSelectData.LeagueAbbName,
        matchNumStr: this.fixSelectData.MatchNum,
        gameDeadline: this.fixSelectData.MatchDate + ' ' + this.fixSelectData.MatchTime,
        orderDeadline: '',
        sort: this.fixSelectData.shopSetExpiration,
        data: [{
          res: this.styledata[game].res[index],
          rate: this.fixSelectData[gameId][this.styledata[game].keyArr[index]],
          poolEs: Number(this.noshowdan(gameId)),
          gameState: game
        }],
      };
      if (this.styledata[game].style[index] === 0) { // 添加
        this.styledata[game].style[index] = 1;
        if (this.temporaryArr === '') { // 如果是第一次选择直接添加进去
          const obj = {
            gameData: array,
            selectBoole: true, // 判断是否取消整场比赛
          };
          this.temporaryArr = obj;
        } else { // 否则只添加玩法进去
          this.temporaryArr.selectBoole = true;
          const newOjd = {
            res: this.styledata[game].res[index],
            rate: this.fixSelectData[gameId][this.styledata[game].keyArr[index]],
            poolEs: Number(this.noshowdan(gameId)),
            gameState: game
          };
          this.temporaryArr.gameData.data.push(newOjd);
        }
        if (game === 'rq') { this.temporaryArr.gameData['goal'] = this.fixSelectData['HHAD'].GoalLine } // 如果是让球玩法添加让球数值
        this.$emit('getSelectList', this.temporaryArr); // 最后把处理好的数据发给父页面
      } else { // 删除
        this.styledata[game].style[index] = 0;
        if (this.temporaryArr.gameData.data.length === 1) { // 当只有一个的情况下直接全部删除
          array.data = []; // 清空已选择玩法
          const obj = {
            gameData: array,
            selectBoole: false,
          };
          this.temporaryArr = obj;
        } else { // 否则删除取消选择用户点击的玩法
          const Delindex = this.temporaryArr.gameData.data.findIndex(item => item.res === this.styledata[game].res[index]);
          this.temporaryArr.gameData.data.splice(Delindex, 1);
          if (game === 'rq') { // 如果用户取消让球玩法就删除让球数值
            let isGoal = false;
            for (let i = 0; i < this.temporaryArr.gameData.data.length; i++) { // 循环判断是否还有让球玩法
              const booleIndex = this.styledata.rq.res.indexOf(this.temporaryArr.gameData.data[i].res);
              if (booleIndex !== -1) {
                isGoal = true;
                break;
              }
            }
            if (!isGoal) {
              delete this.temporaryArr.gameData['goal'];
            }
          }
        }
        this.$emit('getSelectList', this.temporaryArr); // 最后把处理好的数据发给父页面
      }
    },
    noshowdan(id) {
      if (this.fixSelectData.PoolList[id] && this.fixSelectData.PoolList[id].BettingSingle === 1) {
        return true;
      }
      return false;
    },
    noshowgame(gameType) {
      if (this.fixSelectData.PoolList[gameType]) {
        return true;
      }
      return false;
    },
    openpopup() {
      this.$refs.hhggpopup.open('bottom');
    },
    closeupup() {
      this.$refs.hhggpopup.close('bottom');
    }
  },
  mounted() {
    this.init(); // 创建初始化
  },
  watch: {
    Refresh: {
      handler: function (newVal, oldVal) {
        this.init();
      },
      immediate: true
    }
  }
};
</script>

<style>
	.inner-box1 text {
		position: absolute;
		left: 25%;
		bottom: -2px;
		color: #fff;
		transform: translateX(-50%);
	}
	
	.inner-box1 {
	
		width: 50%;
		height: 50%;
		background-color: red;
		transform: rotate(-45deg);
		position: absolute;
		left: -15%;
		top: -15%;
	}
	
	.huadan {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 100%;
		/* background-color: orange;    */
		overflow: hidden;
	}
	
	.check {
		flex:1;
		border-radius:10rpx;
		display: flex;
		justify-content: center;
		align-items: center;



		/* 边框 */
		border: 3rpx solid #edf0f3;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.box {

		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		text-align: center;


	}

	text {
		margin: 1px;
		font-size: 20rpx;

		text-align: center;
	}
	
	.button {
		height: 80rpx;
		width: 100%;
		color: #ff0000;
		font-size: 26rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	
		/* 边框 */
		border: 3rpx solid #ff0000;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.buttonbox {
		flex: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		/* 边框 */
		border: 1rpx solid #edf0f3;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.buttonboxx {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		/* 边框 */
		/* border: 1rpx solid #edf0f3;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box; */
	}

	.checkbox {

		flex: 8;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* 边框 */
		/* border: 1rpx solid #edf0f3;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box; */
	}

	.yc-data-checkbox {
		margin: 5px;
		height: 150rpx;
		display: flex;
		flex-direction: row;
		text-align: center;


	}
</style>